<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <page-tools :show-before="true">
        <!-- 前面内容 -->
        <template v-slot:before>有 0 条考勤审批尚未处理</template>
        <template v-slot:after>
          <el-button size="mini" type="danger" @click="$router.push('/import?type=attendance')">导入</el-button>
        </template>
      </page-tools>
      <!-- 过滤的部门 -->
      <Filters :data="list" @change="changeData" />
      <el-card class="box-card">
        <el-table
          :data="pageList"
          style="width: 100%"
          border
        >
          <el-table-column
            type="index"
            label="序号"
          />
          <el-table-column
            prop="username"
            label="姓名"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120"
            align="center"
          />
          <el-table-column
            prop="mobile"
            label="手机"
            width="120"
            align="center"
          />

          <el-table-column v-for="(item,i) in dayList" :key="item" :label="item">
            <template #default="{row}">
              {{ row.attendanceRecord[i].adtStatu|formatAttendance }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页、 -->
      <el-pagination
        :current-page="page.page"
        :page-sizes="[1, 5, 8, 10]"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>

// import { getAttendancesList, updateAttendance } from '@/api/attendances'
// import { getDepartments } from '@/api/departments'
import attendanceEnum from '@/api/constant/attendance'
import { getMockAttendances } from '@/api/attendances'
import Filters from './components/filters.vue'
export default {
  filters: {
    // 使用枚举+过滤器处理考勤状态中文显示
    formatAttendance(val) {
      const obj = attendanceEnum.holidayType.find(item => item.id === '' + val)
      return obj ? obj.value : ''
    }
  },
  components: { Filters },
  data() {
    return {
    // 源数据
      list: [],
      // 过滤后的数据
      filteredList: [],
      // 翻页配置
      page: {
        page: 1,
        pagesize: 5
      },
      total: 0
    }
  },
  computed: {
    dayList() {
      // 当有数据的时候, 拿出第一行的记录, 用里面的日期生成日期列
      // 因为每行都一样, 用第一行即可
      const daylist = this.list[0] ? this.list[0].attendanceRecord : []
      return daylist.map(item => {
        const month = item.day.toString().substring(4, 6)
        const day = item.day.toString().substring(6)
        return `${month}/${day}`
      })
    },
    // 页码改变
    pageList() {
      const end = this.page.page * this.page.pagesize
      const start = end - this.page.pagesize
      return this.filteredList.slice(start, end)
    }
  },
  created() {
    this.getMockAttendances()
  },
  methods: {
    async  getMockAttendances() {
      const { rows, total } = await getMockAttendances()
      // 原数据
      this.list = [...rows]

      // 过滤的数据
      this.filteredList = [...rows]
      this.total = total
    },
    // 条数发生改变
    handleSizeChange(val) {
      this.page.pagesize = val
    },
    // 页码发生改变
    handleCurrentChange(val) {
      this.page.page = val
    },
    changeData(newData) {
      this.filteredList = newData
      this.total = this.filteredList.length
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .tableInfo {
    line-height: 36px;
    border: solid 1px #ebeef5;
    border-right: 0 none;
    border-bottom: 0 none;
    tr {
      th {
        height: 50px;
        text-align: center;
        border-right: solid 1px #ebeef5;
        border-bottom: solid 1px #ebeef5;
        border-bottom: 2px solid #e8e8e8;
        background: #fafafa;
        min-width:  100px;
      }
      td {
        height: 36px;
        text-align: center;
        border-right: solid 1px #ebeef5;
        border-bottom: solid 1px #ebeef5;
      }
    }
  }

.attenInfo {
  p {
    &.check {
      padding: 20px 0 0;
    }
    .el-radio {
        display: inline-block;
        width: 60px;
        padding: 5px 0;

    }
  }
}
</style>
